<template>
    <p>toRef demo - ageRef:{{ageRef}} - age1:{{age1}} - {{state.name}} {{state.age}}</p>
</template>

<script>
import { ref, toRef, reactive, computed } from 'vue'

/* 从响应式对象中分离出响应式值（令模板中使用数据更简单） */
export default {
    name: 'ToRef',
    setup() {
        /* 值类型响应式数据 */
        const state = reactive({
            age: 20,
            name: 'steve'
        })

        /* 依赖于一手数据的二手数据 */
        const age1 = computed(() => {
            return state.age + 1
        })

        // // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
        // const state = {
        //     age: 20,
        //     name: 'steve'
        // }

        // 从响应式对象中分离出响应式的值（模板中使用起来更简单）
        const ageRef = toRef(state, 'age')

        setTimeout(() => {
            // 修改响应式对象的值
            state.age = 25
        }, 1500)

        setTimeout(() => {
            // 修改响应式值的值
            ageRef.value = 30 // .value 修改值
        }, 3000)

        /* 向模板返回响应式数据 */
        return {
            state,
            age1,
            ageRef
        }
    }
}
</script>